<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>后台管理-用户列表</title>
    <link rel="shortcut icon" href="/images/mask-logo.png">
    <script src="/js/plugins/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap.min.js"></script>

      <link rel=" stylesheet" href="/css/admin/bootstrap.min.css">
    <link rel="stylesheet" href="/css/plugins/pagination.css">
    <link rel=" stylesheet" href="/css/admin.css">
</head>
<body>
<!--头部导航栏-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <div>
        <!--                <img src="/images/mask-logo.png" alt="">-->
        <a class="navbar-brand" style="font-size: 32px;" href="#">MASK <sub>4.0</sub>
          后台管理系统</a>
      </div>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li style="padding-top: 8px;">
          <div class="btn-group">
            <button type="button"
                    class="btn btn-default btn-success dropdown-toggle"
                    data-toggle="dropdown">
              <i class="glyphicon glyphicon-user">管理员</i>
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" style="margin-top: 40px;" role="menu">
              <li><a href="#"><i class="glyphicon glyphicon-cog"></i>
                个人设置</a></li>
              <li><a href="#"><i class="glyphicon glyphicon-comment"></i>
                消息</a></li>
              <li class="divider"></li>
              <li><a href="#" onclick="adminLogout()"><i
                      class="glyphicon glyphicon-off"></i> 退出系统</a></li>
            </ul>
          </div>
        </li>
        <li style="margin-left: 10px; padding-top: 8px;">
          <button type="button" class="btn btn-default btn-danger">
            <span class="glyphicon glyphicon-question-sign"></span> 退出
          </button>
        </li>
      </ul>
      <form class="navbar-form navbar-right">
        <input type="text" class="form-control" placeholder="查询">
      </form>
    </div>
  </div>
</nav>

<!--左边权限树结构-->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
      <div class="tree">
        <ul style="padding-left: 0px;" class="list-group">
          <li class="list-group-item tree-closed"><a href="../main.html"><i
                  class="glyphicon glyphicon-dashboard"></i> 控制面板</a></li>
          <li class="list-group-item tree-closed"><span><i
                  class="glyphicon glyphicon glyphicon-tasks"></i> 用户管理 <span
                  class="badge" style="float: right">2</span></span>
            <ul style="margin-top: 10px; display: none;">
              <li style="height: 30px;"><a href="/admin/consumer/consumerList.html"><i
                      class="glyphicon glyphicon-user"></i> 用户列表</a></li>
              <li style="height: 30px;"><a href="#"><i
                      class="glyphicon glyphicon-backward"></i> 黑名单用户</a></li>
            </ul>
          </li>

          <li class="list-group-item tree-closed"><span><i
                  class="glyphicon glyphicon glyphicon-tasks"></i> 文件管理 <span
                  class="badge" style="float: right">2</span></span>
            <ul style="margin-top: 10px; display: none;">
              <li style="height: 30px;"><a href="adminConsumer"><i
                      class="glyphicon glyphicon-file"></i> 文件列表</a></li>
              <li style="height: 30px;"><a href="adminConsumer"><i
                      class="glyphicon glyphicon-calendar"></i> 文件分类</a></li>
              <li style="height: 30px;"><a href="/role/to/page/page.html"><i
                      class="glyphicon glyphicon-king"></i> 文件审核</a></li>
            </ul>
          </li>


          <li class="list-group-item tree-closed"><span><i
                  class="glyphicon glyphicon-ok"></i> 权限管理 <span class="badge"
                                                                 style="float: right">3</span></span>
            <ul style="margin-top: 10px; display: none;">
              <li style="height: 30px;"><a href="auth_cert.html"><i
                      class="glyphicon glyphicon-check"></i> 权限审核</a></li>
              <li style="height: 30px;"><a href="auth_adv.html"><i
                      class="glyphicon glyphicon-check"></i> 用户审核</a></li>
              <li style="height: 30px;"><a href="auth_project.html"><i
                      class="glyphicon glyphicon-check"></i> 文件审核</a></li>
            </ul></li>
          <!--                    <li class="list-group-item tree-closed"><span><i-->
          <!--                            class="glyphicon glyphicon-th-large"></i> 业务管理 <span class="badge"-->
          <!--                                                                                 style="float: right">7</span></span>-->
          <!--                        <ul style="margin-top: 10px; display: none;">-->
          <!--                            <li style="height: 30px;"><a href="cert.html"><i-->
          <!--                                    class="glyphicon glyphicon-picture"></i> 资质维护</a></li>-->
          <!--                            <li style="height: 30px;"><a href="type.html"><i-->
          <!--                                    class="glyphicon glyphicon-equalizer"></i> 分类管理</a></li>-->
          <!--                            <li style="height: 30px;"><a href="process.html"><i-->
          <!--                                    class="glyphicon glyphicon-random"></i> 流程管理</a></li>-->
          <!--                            <li style="height: 30px;"><a href="advertisement.html"><i-->
          <!--                                    class="glyphicon glyphicon-hdd"></i> 广告管理</a></li>-->
          <!--                            <li style="height: 30px;"><a href="message.html"><i-->
          <!--                                    class="glyphicon glyphicon-comment"></i> 消息模板</a></li>-->
          <!--                            <li style="height: 30px;"><a href="project_type.html"><i-->
          <!--                                    class="glyphicon glyphicon-list"></i> 项目分类</a></li>-->
          <!--                            <li style="height: 30px;"><a href="tag.html"><i-->
          <!--                                    class="glyphicon glyphicon-tags"></i> 项目标签</a></li>-->
          <!--                        </ul></li>-->


          <li class="list-group-item tree-closed"><a href="#"><i
                  class="glyphicon glyphicon-list-alt"></i> 参数管理</a></li>
        </ul>
      </div>
    </div>


    <!--    管理员用户列表-->
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
      <div class="panel panel-default consumer-list">
        <div class="panel-heading">
          <h3 class="panel-title">
            <i class="glyphicon glyphicon-th"></i> 数据列表
          </h3>
        </div>
        <div class="panel-body">
          <form class="form-inline" role="form" style="float: left;">
            <div class="form-group has-feedback">
              <div class="input-group">
                <div class="input-group-addon">查询条件</div>
                <input class="form-control has-success" type="text"
                       placeholder="请输入查询条件">
              </div>
            </div>
            <button type="button" class="btn btn-warning">
              <i class="glyphicon glyphicon-search"></i> 查询
            </button>
          </form>
          <button type="button" class="btn btn-danger"
                  style="float: right; margin-left: 10px;">
            <i class=" glyphicon glyphicon-remove"></i> 删除
          </button>
          <button type="button" class="btn btn-primary" id="adminInsert"
                  style="float: right;">
            <i class="glyphicon glyphicon-plus"></i> 新增
          </button>
          <br>
          <hr style="clear: both;">
          <div class="table-responsive">
            <table class="table  table-bordered">
              <thead>
              <tr align="center">
                <th width="70"><input type="checkbox">&nbsp;序号</th>
                <th>账号名</th>
                <th>密码</th>
                <th>昵称</th>
                <th>手机号</th>
                <th>状态</th>
                <th>注册时间</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody id="admin-consumer-list" class="admin-consumer-list">

              </tbody>
              <tfoot>
              <tr>
                <td colspan="8" class="expandable-body" align="center">
                  <div id="adminPagination" class="pagination show-pagination"><!-- 这里显示分页 --></div>
                </td>
              </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--管理员添加用户-->
  <div class="modal fade modal_position" id="adminInsertModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="margin-top: 40px;">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <img src="/images/mask-logo.png">
          <span class="modal-title modal-font-span">管理员添加用户</span>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <!--        管理员添加用户input账户名-->
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="fas fa-user"></i></span>
            </div>
            <input type="text" class="form-control col-6" id="admin_insert_username" placeholder="此账户名用做登录">
            <p class="message-p" id="message_register_username"></p>
          </div>
          <!--        注册input密码-->
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="fas fa-lock"></i></span>
            </div>
            <!--          <input type="password" class="form-control col-6" id="register_password" placeholder="密码含字母数字8位组合" onKeyUp=pwStrength(this.value); onBlur=pwStrength(this.value)>-->
            <input type="password" class="form-control col-6" id="register_password" placeholder="密码含字母数字8位组合">
            <p class="message-p" id="message_register_password"></p>
            <!--          <span>密码强度</span>-->
            <table class="password-table" id="password_strong_level">
              <tr align="center" bgcolor="#f5f5f5" style="height:10px">
                <td id="strength_L" style="height: 10px">
                  <span class="password-span">弱</span>
                </td>
                <td id="strength_M">
                  <span class="password-span">中</span>
                </td>
                <td id="strength_H">
                  <span class="password-span">强</span>
                </td>
              </tr>
            </table>
          </div>

          <!--        注册input确认密码-->
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="fas fa-lock"></i></span>
            </div>
            <input type="password" class="form-control col-6" placeholder="两次密码请确认一致" id="register_confirm_password">
            <p class="message-p" id="message_register_confirm_password"></p>
          </div>
          <!--        注册input昵称-->
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="fas fa-smile"></i></span>
            </div>
            <input type="text" class="form-control col-6" placeholder="请输入账户昵称" id="register_nick">
            <p class="message-p" id="message_register_nick"></p>
          </div>
          <!--        注册input手机号-->
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="fas fa-phone"></i></span>
            </div>
            <input type="text" class="form-control col-6" id="register_phone" placeholder="请输入手机号">
            <p class="message-p" id="message_register_phone"></p>
          </div>
          <!--        手机验证码-->
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="fas fa-envelope"></i></span>
            </div>
            <input type="text" class="form-control col-6" id="short_message_input" placeholder="6位数字验证码">
            <!--          <button type="button" class="btn btn-block btn-outline-success btn-lg btn-lg-phone-width" onclick="getPhoneMessage()">发送验证码</button>-->
            <button type="button" class="btn btn-confirm btn-control phone-in-input" onclick="getPhoneMessage()">发送验证码</button>
            <p class="message-p" id="message_register_short"></p>
            <p class="message-p-success" id="message_register_short_success"></p>
          </div>

        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
          <button class="btn btn-primary" onclick="register()">注册</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="adminUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
        </div>
        <div class="modal-body">在这里添加一些文本</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary">提交更改</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>

</div>
<!--<script src="/js/plugins/jquery.min.js"></script>-->
<!--<script src="/js/plugins/bootstrap.min.js"></script>-->
<script src="/layer/layer.js"></script>
<script src="/js/plugins/jquery.pagination.js" type="text/javascript"></script>
<script src="/js/admin/adminLogin.js"></script>



</body>
</html>

<script>
  window.onload = function (){
    generateConsumerList();
  }
</script>